<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MUI 可视化设计工具</title>

    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class = "editor">
        <header class = "toolbar">

        </header>
        <section class="mainbox">
            <div class = "contextmenu">
                <div class = "context-tab">
                    <div class = "context-tab-header">
                        <div class = "context-tab-title active" tab-target="file">
                            <i class = "fa fa-folder"></i>
                        </div>
                        <div class = "context-tab-title" tab-target = "ui">
                            <i class = "fa fa-cubes"></i>
                        </div>
                    </div>
                    <div class = "context-tab-content">
                        <div class = "context-tab-content-item filelist active"  tab-index = "file">
                            <div class = "filelist-item">
                                <i class = "fa fa-file-code-o"></i>登录
                            </div>
                            <div class = "filelist-item">
                                <i class = "fa fa-file-code-o"></i>首页
                            </div>
                            <div class = "filelist-item active">
                                <i class = "fa fa-file-code-o"></i>通讯录
                            </div>
                            <div class = "filelist-item">
                                <i class = "fa fa-file-code-o"></i>个人中心
                            </div>
                            <div class = "filelist-item">
                                <i class = "fa fa-file-code-o"></i>其他
                            </div>
                        </div>
                        <div class = "context-tab-content-item " tab-index = "ui">
                            <div class = "uitable">
                                <table  class = "view-table">
                                    <tr >
                                        <th colspan="4" class="ui-header">
                                            <span class = "ui-title">基础控件</span>
                                        </th>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div action-view = "text" class = "od-box">
                                                <i class = "preview">
                                                    <i class="fa fa-font"></i>
                                                </i>
                                            </div>
                                            <p>文本</p>
                                        </td>
                                        <td>
                                            <div action-view="link" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-link"></i>
                                                </i>
                                            </div>
                                            <p>
                                                链接
                                            </p>
                                        </td>
                                        <td>
                                            <div action-view="paragraph" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-align-justify"></i>
                                                </i>
                                            </div>
                                            <p>段落</p>
                                        </td>
                                        <td>
                                            <div action-view="headline" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-header"></i>
                                                </i>
                                            </div>
                                            <p>标题</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div action-view="list" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-list"></i>
                                                </i>
                                            </div>
                                            <p>列表</p>
                                        </td>
                                        <td>
                                            <div action-view="table" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-table"></i>
                                                </i>
                                            </div>
                                            <p>表格</p>
                                        </td>
                                        <td>
                                            <div action-view = "div" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-square-o"></i>
                                                </i>
                                            </div>
                                            <p>区块</p>
                                        </td>
                                        <td>
                                            <div action-view = "form" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-clone"></i>
                                                </i>
                                            </div>
                                            <p>表单</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div action-view = "audio" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-music"></i>
                                                </i>
                                            </div>
                                            <p>音频</p>
                                        </td>
                                        <td>
                                            <div action-view = "video" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-film"></i>
                                                </i>
                                            </div>
                                            <p>视频</p>
                                        </td>
                                        <td>
                                            <div action-view = "image" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-image"></i>
                                                </i>
                                            </div>
                                            <p>图片</p>
                                        </td>
                                        <td>
                                            <i class = "fa fa-file-pdf-o"></i>
                                            <p>插件</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div action-view = "input" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-italic"></i>
                                                </i>
                                            </div>
                                            <p>文本框</p>
                                        </td>
                                        <td>
                                            <div action-view = "radio" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-dot-circle-o"></i>
                                                </i>
                                            </div>
                                            <p>单选框</p>
                                        </td>
                                        <td>
                                            <div action-view = "checkbox" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-check-square-o"></i>
                                                </i>
                                            </div>
                                            <p>复选框</p>
                                        </td>
                                        <td>
                                            <div action-view = "select" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-plus-square-o"></i>
                                                </i>
                                            </div>
                                            <p>多选框</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div action-view = "textarea" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-file-excel-o"></i>
                                                </i>
                                            </div>
                                            <p>大文本</p>
                                        </td>
                                        <td>
                                            <div action-view = "button" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-hand-pointer-o"></i>
                                                </i>
                                            </div>
                                            <p>按钮</p>
                                        </td>
                                        <td>
                                            <div action-view = "uploader" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-cloud-upload"></i>
                                                </i>
                                            </div>

                                            <p>上传</p>
                                        </td>
                                        <td>
                                            <div action-view = "icon" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-adn"></i>
                                                </i>
                                            </div>
                                            <p>图标</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th colspan="4" class="ui-header">
                                            <span class = "ui-title">数据控件</span>
                                        </th>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div action-view = "datasource" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-cube"></i>
                                                </i>
                                            </div>
                                            <p>单源</p>
                                        </td>
                                        <td>
                                            <div action-view = "datalist" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-cubes"></i>
                                                </i>
                                            </div>
                                            <p>列表</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th colspan="4" class = "ui-header">
                                            <span class = "ui-title">MUI控件</span>
                                        </th>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div action-view = "mbutton" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-hand-pointer-o"></i>
                                                </i>
                                            </div>
                                            <p>按钮</p>
                                        </td>
                                        <td>
                                            <div action-view = "mbadge" class = "od-box">
                                                <i class = "preview">
                                                    <i class="fa">1</i>
                                                </i>
                                            </div>
                                            <p>角标</p>
                                        </td>
                                        <td>
                                            <div action-view = "mcheckbox" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-check-square-o"></i>
                                                </i>
                                            </div>
                                            <p>复选框</p>
                                        </td>
                                        <td>
                                            <div action-view = "mradio" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-dot-circle-o"></i>
                                                </i>
                                            </div>
                                            <p>单选框</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div action-view = "mcheck" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-check-square"></i>
                                                </i>
                                            </div>
                                            <p>勾选</p>
                                        </td>
                                        <td>
                                            <div action-view = "minput" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-italic"></i>
                                                </i>
                                            </div>
                                            <p>输入框</p>
                                        </td>
                                        <td>
                                            <div action-view = "minput" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-eye-slash"></i>
                                                </i>
                                            </div>
                                            <p>密码框</p>
                                        </td>
                                        <td>
                                            <div action-view = "msearch" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-search"></i>
                                                </i>
                                            </div>
                                            <p>搜索框</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class = "fa fa-text-height"></i>
                                            <p>大文本</p>
                                        </td>
                                        <td>
                                            <div action-view = "mnumber" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-font"></i>
                                                </i>
                                            </div>
                                            <p>数字框</p>
                                        </td>
                                        <td>
                                            <div action-view = "mdatepicker" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-calendar-o"></i>
                                                </i>
                                            </div>
                                            <p>日期</p>
                                        </td>
                                        <td>
                                            <div action-view = "mtimepicker" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-calendar-times-o"></i>
                                                </i>
                                            </div>
                                            <p>时间</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div action-view = "mpicker" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-bars"></i>
                                                </i>
                                            </div>
                                            <p>选择器</p>
                                        </td>
                                        <td>
                                            <div action-view = "mprogress" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-tasks"></i>
                                                </i>
                                            </div>
                                            <p>进度条</p>
                                        </td>
                                        <td>
                                            <div action-view = "mrange" class = "od-box">
                                                <i class = "preview">
                                                    <i class="fa fa-registered"></i>
                                                </i>
                                            </div>
                                            <p>滑块</p>
                                        </td>
                                        <td>
                                            <div action-view = "mswitch" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-toggle-off"></i>
                                                </i>
                                            </div>
                                            <p>开关</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th colspan="4" class = "ui-header">
                                            <span class = "ui-title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                        </th>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div action-view = "mcolumn" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-columns"></i>
                                                </i>
                                            </div>
                                            <p>布局</p>
                                        </td>
                                        <td>
                                            <div action-view = "mheader" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-window-maximize"></i>
                                                </i>
                                            </div>
                                            <p>导航栏</p>
                                        </td>
                                        <td>
                                            <i class = "fa fa-window-minimize"></i>
                                            <p>透明栏</p>
                                        </td>
                                        <td>
                                            <i class = "fa fa-window-restore"></i>
                                            <p>选项卡</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div action-view = "mbottombar" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-flickr"></i>
                                                </i>
                                            </div>
                                            <p>底部栏</p>
                                        </td>
                                        <td>
                                            <i class = "fa fa-trello"></i>
                                            <p>上拉菜单</p>
                                        </td>
                                        <td>
                                            <div action-view = "maside" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-bars"></i>
                                                </i>
                                            </div>
                                            <p>侧边栏</p>
                                        </td>
                                        <td>
                                            <div action-view = "mgrid" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-table"></i>
                                                </i>
                                            </div>
                                            <p>九宫格</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div action-view = "maccordion" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-credit-card"></i>
                                                </i>
                                            </div>
                                            <p>折叠面板</p>
                                        </td>
                                        <td>
                                            <div action-view = "maccordion" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-minus-square-o"></i>
                                                </i>
                                            </div>
                                            <p>卡片</p>
                                        </td>
                                        <td>
                                            <div action-view = "mgallery" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-object-ungroup"></i>
                                                </i>
                                            </div>
                                            <p>轮播图</p>
                                        </td>
                                        <td>
                                            <i class = "fa fa-hand-grab-o"></i>
                                            <p>下拉列表</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div action-view = "mlist" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-navicon"></i>
                                                </i>
                                            </div>
                                            <p>列表</p>
                                        </td>
                                        <td>
                                            <div action-view = "mtexture" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-newspaper-o"></i>
                                                </i>
                                            </div>
                                            <p>图文列</p>
                                        </td>
                                        <td>
                                            <div action-view = "mtexturetable" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-object-group"></i>
                                                </i>
                                            </div>
                                            <p>图文表</p>
                                        </td>
                                        <td>
                                            <div action-view = "mpagination" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-ellipsis-h"></i>
                                                </i>
                                            </div>
                                            <p>分页</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th colspan="4" class = "ui-header">
                                            <span class = "ui-title">其他控件</span>
                                        </th>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div action-view = "mbarcode" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-barcode"></i>
                                                </i>
                                            </div>
                                            <p>条形码</p>
                                        </td>
                                        <td>
                                            <div action-view = "mqrcode" class = "od-box">
                                                <i class = "preview">
                                                    <i class = "fa fa-qrcode"></i>
                                                </i>
                                            </div>
                                            <p>二维码</p>
                                        </td>
                                    </tr>
                                </table>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class = "workspace">
                <div class = "phone-box">
                    <div class = "phonebar">
                        <img src = "images/phonebar.png">
                    </div>
                    <div class = "phone-content sortable" id = "editor">

                    </div>
                    <div class = "bottom-menu">
                        <nav class="mui-bar mui-bar-tab">
                            <a id="defaultTab" class="mui-tab-item mui-active" href="tab-webview-subpage-about.html">
                                <span class="mui-icon mui-icon-home"></span>
                                <span class="mui-tab-label">首页</span>
                            </a>
                            <a class="mui-tab-item" href="tab-webview-subpage-chat.html">
                                <span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
                                <span class="mui-tab-label">消息</span>
                            </a>
                            <a class="mui-tab-item" href="tab-webview-subpage-contact.html">
                                <span class="mui-icon mui-icon-contact"></span>
                                <span class="mui-tab-label">通讯录</span>
                            </a>
                            <a class="mui-tab-item" href="tab-webview-subpage-setting.html">
                                <span class="mui-icon mui-icon-gear"></span>
                                <span class="mui-tab-label">设置</span>
                            </a>
                        </nav>
                    </div>
                </div>
            </div>
            <div class = "attributions">
                <div class = "context-tab">
                    <div class = "context-tab-header">
                        <div class = "context-tab-title active" tab-target="style">
                            <i class = "fa">样式</i>
                        </div>
                        <div class = "context-tab-title" tab-target = "attribute">
                            <i class = "fa">属性</i>
                        </div>
                        <div class = "context-tab-title" tab-target = "event">
                            <i class = "fa">事件</i>
                        </div>
                    </div>
                    <div class = "context-tab-content">
                        <div class = "context-tab-content-item active"  tab-index = "style" id = "style">
                            <div class = "stylebox">
                                <div class = "column style-row">
                                    <div class = "column1">
                                        宽：<input type="text" class = "style-input-box" od-style = "width" />px
                                    </div>
                                    <div class = "column1">
                                        高：<input type="text" class = "style-input-box" od-style = "height"/>px
                                    </div>
                                </div>
                                <div class = "column style-row">
                                    背景：<input type="color" class = "color-box" od-style = "background"/>
                                </div>
                                <div class = "fontbox">
                                    <div class = "fontbox-title style-row">
                                        文字
                                    </div>
                                    <div class = "column style-row">
                                        样式：
                                        <div class = "font-base-style column1 column">
                                            <div class = "column1">
                                                <input type="checkbox" class = "fontRadio" id = "fontbold" name="style"  od-style="font-bold"/>
                                                <label class = "fa fa-bold" for = "fontbold"></label>
                                            </div>
                                            <div class = "column1">
                                                <input type="checkbox" class = "fontRadio" id = "fontitalic" name="style" od-style="font-italic"/>
                                                <label class = "fa fa-italic" for = "fontitalic"></label>
                                            </div>
                                            <div class = "column1">
                                                <input type="checkbox" class = "fontRadio" id = "fontunderline" name="style" od-style = "font-underline"/>
                                                <label class = "fa fa-underline" for = "fontunderline"></label>
                                            </div>
                                            <div class = "column3"></div>
                                        </div>

                                    </div>
                                    <div class = "column style-row">
                                        对齐方式：
                                        <div class = "font-base-style column column1">
                                            <div class = "column1">
                                                <input type="radio" class = "fontRadio" id = "aligncenter" name="align" od-style = "align-center"/>
                                                <label class = "fa fa-align-center" for = "aligncenter"></label>
                                            </div>
                                            <div class = "column1">
                                                <input type="radio" class = "fontRadio" id = "alignjustify" name="align" od-style = "align-justify"/>
                                                <label class = "fa fa-align-justify" for = "alignjustify"></label>
                                            </div>
                                            <div class = "column1">
                                                <input type="radio" class = "fontRadio" id = "alignleft" name = "align" od-style = "align-left"/>
                                                <label class = "fa fa-align-left" for = "alignleft"></label>
                                            </div>
                                            <div class = "column1">
                                                <input type="radio" class = "fontRadio" id = "alignright" name = "align" od-style="align-right"/>
                                                <label class = "fa fa-align-right" for = "alignright"></label>
                                            </div>
                                            <div class="column2"></div>
                                        </div>
                                    </div>
                                    <div class = "column style-row">
                                        字体：
                                        <select class = "column1 style-select" od-style="font-family">
                                            <option value = "">请选择字体</option>
                                            <option value = "宋体">宋体</option>
                                            <option value = "黑体">黑体</option>
                                        </select>
                                    </div>
                                    <div class = "column style-row">
                                        <div class = "column1">
                                            大小：<input type="text" class = "style-input-box" od-style = "font-size"/>px
                                        </div>
                                        <div class = "column1">
                                            颜色：<input type="color" class = "color-box" value="#F00" od-style = "color"/>
                                        </div>
                                    </div>
                                </div>
                                <div class = "borderbox">
                                    <div class = "style-row">
                                        边框
                                    </div>
                                    <div class = "column style-row indent12">
                                        <div class = "column1 column">
                                            上边框：
                                            <input type="text" class = "style-input-box mini" od-style="border-top-width"/>
                                            <input type="color" class = "color-box" od-style="border-top-color"/>
                                        </div>
                                        <div class = "column1 column">
                                            下边框：
                                            <input type="text" class = "style-input-box mini" od-style = "border-bottom-width"/>
                                            <input type="color" class = "color-box" od-style = "border-bottom-color"/>
                                        </div>
                                    </div>
                                    <div class = "column style-row indent12">
                                        <div class = "column1 column">
                                            左边框：
                                            <input type="text" class = "style-input-box mini" od-style = "border-left-width"/>
                                            <input type="color" class = "color-box" od-style = "border-left-color"/>
                                        </div>
                                        <div class = "column1 column">
                                            右边框：
                                            <input type="text" class = "style-input-box mini" od-style = "border-right-width"/>
                                            <input type="color" class = "color-box" od-style = "border-right-color"/>
                                        </div>
                                    </div>
                                </div>
                                <div class = "borderbox">
                                    <div class = "style-row">
                                        内边距
                                    </div>
                                    <div class = "column style-row indent12">
                                        <div class = "column1 column">
                                            上边距：
                                            <input type="text" class = "style-input-box mini" od-style = "padding-top"/>px
                                        </div>
                                        <div class = "column1 column">
                                            下边距：
                                            <input type="text" class = "style-input-box mini" od-style = "padding-bottom"/>px
                                        </div>
                                    </div>
                                    <div class = "column style-row indent12">
                                        <div class = "column1 column">
                                            左边距：
                                            <input type="text" class = "style-input-box mini" od-style = "padding-left"/>px
                                        </div>
                                        <div class = "column1 column">
                                            右边距：
                                            <input type="text" class = "style-input-box mini" od-style = "padding-right"/>px
                                        </div>
                                    </div>
                                </div>
                                <div class = "borderbox">
                                    <div class = "style-row">
                                        外边距
                                    </div>
                                    <div class = "column style-row indent12">
                                        <div class = "column1 column">
                                            上边距：
                                            <input type="text" class = "style-input-box mini" od-style = "margin-top"/>px
                                        </div>
                                        <div class = "column1 column">
                                            下边距：
                                            <input type="text" class = "style-input-box mini" od-style = "margin-bottom"/>px
                                        </div>
                                    </div>
                                    <div class = "column style-row indent12">
                                        <div class = "column1 column">
                                            左边距：
                                            <input type="text" class = "style-input-box mini" od-style = "margin-left"/>px
                                        </div>
                                        <div class = "column1 column">
                                            右边距：
                                            <input type="text" class = "style-input-box mini" od-style = "margin-right"/>px
                                        </div>
                                    </div>
                                </div>
                                <div class = "borderbox">
                                    <div class = "style-row">
                                        圆角
                                    </div>
                                    <div class = "column style-row indent12">
                                        <div class = "column1 column">
                                            上圆角：
                                            <input type="text" class = "style-input-box mini" od-style = "border-top-radius"/>px
                                        </div>
                                        <div class = "column1 column">
                                            下圆角：
                                            <input type="text" class = "style-input-box mini" od-style = "border-bottom-radius"/>px
                                        </div>
                                    </div>
                                    <div class = "column style-row indent12">
                                        <div class = "column1 column">
                                            左圆角：
                                            <input type="text" class = "style-input-box mini" od-style = "border-left-radius"/>px
                                        </div>
                                        <div class = "column1 column">
                                            右圆角：
                                            <input type="text" class = "style-input-box mini" od-style = "border-right-radius"/>px
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class = "context-tab-content-item "  tab-index = "attribute" id = "attribute">

                        </div>
                        <div class = "context-tab-content-item" tab-index = "event" id = "events">

                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</body>
<script src = "js/jquery-2.0.0.min.js"></script>
<script src = "js/jquery-ui.js"></script>
<script src = "js/index.js"></script>
</html>